<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/public.css">
    <!-- js交互 -->
    <script src="/lib/require/require.js" data-main="/js/index"></script>
</head>
<body>
    <!-- header -->
    <header></header>


    <!-- banner -->
    <div class="banner">
        <!-- banner轮播图 -->
        <div class="slider swiper-container">
            <!-- 图片轮播容器 -->
            <ul class="slider-swiper swiper-wrapper" >
                <li class="swiper-slide"><a href=""><img src="/img/index/banner1.png" alt=""></a></li>
                <li class="swiper-slide"><a href=""><img src="/img/index/banner2.JPEG" alt=""></a></li>
                <li class="swiper-slide"><a href=""><img src="/img/index/banner3.JPEG" alt=""></a></li>
                <li class="swiper-slide"><a href=""><img src="/img/index/banner4.JPEG" alt=""></a></li>
            </ul>
            <!-- 小园点 -->
            <div class = "swiper-pagination slider-icon">
                <span></span>
            </div>
            <!-- 按钮 -->
            <a class="slider-btns-pre swiper-button-prev" href="javascript:void(0);">
                <i></i>
            </a>
            <a class="slider-btns-next swiper-button-next" href="javascript:void(0);">
                <i></i>
            </a>
        </div>

        <!-- 菜单 -->
        <ul class="muen">
        </ul>
    </div>
    <!-- 热卖商品 -->
    <div class="hot-product wrap">
        <div class="home-title">
            <h1 class="fl">热卖商品</h1>
        </div>
        <!-- 热卖商品列表hot-list -->
        <div class="hot-list">
        </div>
    </div>
    <!-- 商品展示 -->
    <div class="product-categroy wrap"> 
    </div>

    <!-- footer -->
    <footer></footer>

<!-- html template模板 -->

    <!-- banner上面的菜单模板 -->
    <script type="text/html" id="muen">
        {{each muenArray firstMuen}}
        <li class="muen-list">
            <p class="muen-text">
                <img class="muen-text-bg" src="{{firstMuen.imgUrl}}" alt="">
                <span>{{firstMuen.title}}</span>
            </p>
            <ul class="muen-box">
                {{each firstMuen.twoMuen twoMuenCurr}}
                <li>
                    {{each twoMuenCurr.twoMuenItem muenMes}}
                    <a href="/html/list.html">
                        <img src="{{muenMes.twoMuenItemImg}}" alt="">
                        <span>{{muenMes.twoMuenItemTitle}}</span>
                    </a>
                    {{/each}}
                </li>
                {{/each}}
            </ul>
        </li>
        {{/each}}
    </script>

    <!-- 热卖商品 -->
    <script type="text/html" id="productHot">
        {{each productHotArray curr}}
        <a href="javascript:void(0);">
            <dl>
                <dd>
                    <img src="{{curr.imgUrl}}" alt="">
                </dd>
                <dt>
                    <p class="tpis ellipsis">{{curr.product_tpis}}</p>
                    <p class="price">￥{{curr.product_price}}</p>
                </dt>
            </dl>
        </a>
        {{/each}}
    </script>

    <!-- 商品分类 -->
    <script type="text/html" id="category">
        {{each productArr curr}}
        <div class="product-show">
            <!-- 标题信息 -->
            <div class="home-title">
                <h1 class="fl">{{curr.mainTitle}}</h1>
                <a class="more fr" href="/html/list.html">更多 &gt;</a>
                <div class="submuen fr">
                    {{each curr.productLink currLink}}
                    <a href="/html/list.html">{{currLink.linkTitle}}</a>
                    <span>|</span>
                    {{/each}}
                </div>
            </div>
            <!-- 商品展示信息 -->
            <div class="product-show-box">
                <div class="product-show-box-top">
                    <div class="product-big-img">
                        <a href="javascript:void(0);">
                            <img src="{{curr.product_big_img}}" alt="">
                        </a>
                    </div>
                    {{each curr.product_top item}}
                    <div class="product-small-img">
                        <a class="product-small-img-wrap" href="javascript:void(0);">
                            <dl>
                                <dd>
                                    <img src="{{item.product_small_img}}" alt="">
                                </dd>
                                <dt>
                                    <p class="title ellipsis">{{item.product_small_tpis}}</p>
                                    <p class="price">￥{{item.product_small_price}}</p>
                                </dt>
                            </dl>
                        </a>
                    </div>
                    {{/each}}
                </div>
                <div class="product-show-box-bom">
                    {{each curr.product_bottom bonItem}}
                    <div class="product-small-img">
                        <a class="product-small-img-wrap" href="javascript:void(0);">
                            <dl>
                                <dd>
                                    <img src="{{bonItem.product_small_img}}" alt="">
                                </dd>
                                <dt>
                                    <p class="title ellipsis">{{bonItem.product_small_tpis}}</p>
                                    <p class="price">￥{{bonItem.product_small_price}}</p>
                                </dt>
                            </dl>
                        </a>
                    </div>
                    {{/each}}
                </div>
            </div>
        </div>
        {{/each}}
    </script>



</body>
</html>